<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:80px' }"
    :wrapper-col="{ style: 'calc(100% - 80px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-row>
      <a-col :span="8" v-for="(item, index) in formItemColumn" :key="index">
        <a-form-item v-bind="item">
          <template v-if="item.name === 'countryRegionName'"> <a-input-number v-model:value="formState.insuranceFeeRatio" :min="0" :max="100" :precision="2"></a-input-number> % </template>

          <template v-else-if="item.name === 'aaa'">
            {{ formState["insuranceAmount"] }} * {{ (((formState.insuranceFeeRatio / 100) * 100) / 100).toFixed(4) }} =
            {{ ((formState["insuranceAmount"] * (formState.insuranceFeeRatio * 100)) / 100 / 100).toFixed(4) }}
          </template>
          <template v-else>
            {{ formState[item.name] }}
          </template>
        </a-form-item>
      </a-col>
    </a-row>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button :loading="loading" type="primary" @click="refuseApplyHandle">驳回</a-button>

      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import InitHook from "./composables/initHook";
import { toRefs, watch } from "vue";
import OperationHook from "./composables/operationHook";
import { formItemColumn } from "./data";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: InsuranceApproval.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);

const { formDataRef, loading, formState } = InitHook();
const { onFinish, onFinishFailed, resetHandle, resetFields, refuseApplyHandle } = OperationHook({ formDataRef, loading, formState, emit, passData });

const init = () => {
  Object.assign(formState, passData.value);
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (!v) {
      resetFields();
      formDataRef.value.clearValidate();
      init();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-picker){
    width: 100%;
}
</style>
